<!--价格展示-->
<script setup lang="ts">
const pricing_plans = [
  {
    type: "社区版",
    price: "永久免费",
    description: "前期探索",
    features: [
      "20+免费AI组件",
      "支持无限制创建AI自定义应用",
      "内置文生图、图生图、图生视频",
      "响应式界面，无缝接入小程序",
      "支持公众号接入AI绘画",
      "支持本地和服务端绘图",
      "大语言模型支持（提示词优化）",
      "支持几乎所有大语言模型接入",
      "自定义网页界面显示",
      "详细部署文档和常见问题",
    ],
    btn_text: "免费体验",
    color: "#13BB70",
    colorClass: "community-color",
  },
  {
    type: "高级商用版",
    price: "￥1998",
    description: "追求体验之选",
    features: [
      "社区版全部功能",
      "SSR渲染（更好的SEO）",
      "高级组件（更好的用户体验）",
      "支付功能",
      "订单管理",
      "部署支持和答疑",
      "终身免费更新",
    ],
    btn_text: "购买",
    color: "#4945ff",
    colorClass: "pro-color",
  },
  {
    type: "高级商用版+部署服务",
    price: "￥2998",
    description: "省心之选",
    features: [
      "社区版全部功能",
      "整站交付",
      "多算力负载均衡",
      "算力扩容支持"
    ],
    btn_text: "购买",
    color: "#AC56F5",
    colorClass: "team-color",
  },
  {
    type: "企业服务",
    price: "按需定制",
    description: "企业定制化解决方案",
    features: [
      "企业定制解决方案",
      "企业AI开发赋能",
      "模型训练",
      "工作流开发",
      "镜像维护",
      "其他定制化AI开发需求"
    ],
    btn_text: "购买",
    color: "#0e9ec7",
    colorClass: "team-color",
  },
];
</script>

<template>
  <!--  <v-toolbar height="60">-->
  <!--    <v-toolbar-title class="text-h6 font-weight-bold">-->
  <!--      <span>Pricing2</span>-->
  <!--    </v-toolbar-title>-->
  <!--  </v-toolbar>-->
  <v-sheet elevation="0" class="mx-auto landing-warpper text-left" rounded>
    <v-sheet
        elevation="0"
        color="transparent"
        class="mx-auto my-10 pa-10"
    >
      <v-item-group mandatory selected-class="active-card">
        <v-row align="stretch">
          <v-col cols="12" md="3" v-for="plan in pricing_plans">
            <v-item v-slot="{ selectedClass, toggle }">
              <v-card
                  elevation="0"
                  height="100%"
                  min-width='350'
                  class="base-card mx-auto pa-5 d-flex flex-column justify-start"
                  :class="selectedClass"
                  @click="toggle"
                  color="#F6FAFE"
              >
                <div>
                  <h3
                      class="font-weight-bold text-h6 mb-5 text-center"
                      :class="plan.colorClass"
                  >
                    {{ plan.type }}
                  </h3>
                  <v-card elevation="0" class="text-center">
                    <h1 class="font-weight-black text-h4 my-10 text-color">
                      <span>{{ plan.price }}</span>
                    </h1>
                    <p class="font-weight-bold">
                      {{ plan.description }}
                    </p>
                    <p class="px-5 pt-5">
                      <v-btn
                          size="x-large"
                          class="text-white my-5"
                          block
                          :color="plan.color"
                      >{{ plan.btn_text }}
                      </v-btn
                      >
                    </p>
                  </v-card>
                  <div class="px-5 py-10">
                    <h3 :class="plan.colorClass" class="mb-5">
                      {{ plan.type }}
                    </h3>
                    <div>
                      <div
                          class="text-color text-body-2 font-weight-medium mb-3"
                          v-for="feature in plan.features"
                      >
                        <v-btn size="20" icon class="mr-2">
                          <v-icon size="14" :color="plan.color"
                          >mdi-check
                          </v-icon
                          >
                        </v-btn
                        >

                        {{ feature }}
                      </div>
                    </div>
                  </div>
                </div>
              </v-card>
            </v-item>
          </v-col>
        </v-row>
      </v-item-group>
    </v-sheet>
  </v-sheet>
</template>

<style scoped lang="scss">
.base-card {
  transition: 0.3s ease-out;
  border: 1px solid #eaf2fa;
}

.active-card {
  border: 1px solid #e5e5e5;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
  transform: scale(1.05);
  transition: 0.3s ease-out;
}

//.text-color {
//  color: #1d1b84;
//}

.pro-color {
  color: #4945ff;
}

.team-color {
  color: #ac56f5;
}

.community-color {
  color: #13bb70;
}
</style>
